<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/register.css" >
</head>
<body>
<div id="registerApp" class="loginDiv" style="height: 350px">
    <form action="../pages/register.html" id="form" method="post":model="registerData">
        <h1 id="loginMsg">欢迎注册</h1>
        <p>Username:<input id="username"
                           name="username"
                           v-model="registerData.username"
                           placeholder="请输入用户名"
                           type="text"></p>

        <p>Password :<input id="password"
                            name="password"
                            v-model="registerData.password"
                            show-password
                            placeholder="请输入密码"
                            type="password"></p>
        <div id="subDiv">
            <input type="reset" class="button" value="register up" @click="register()">
            <input type="reset" class="button" value="reset" @click="resetForm()">&nbsp;&nbsp;&nbsp;
            <a href="login.html">已有账号？</a>
        </div>
    </form>
</div>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var vue = new Vue({

        el: '#registerApp',
        data: {
            registerData: {},//表单数据
        },

        created() {
        },
        methods: {
            register() {
                axios.post("/user/register", this.registerData).then((res) => {
                    if (res.data.code == 10040) {
                        this.$alert('恭喜你,注册成功', '注册成功', {
                            confirmButtonText: '确定',
                            callback: action => {
                                window.location.href = '/pages/login.html';
                                this.$message.success("注册成功,请登录");
                            }
                        });
                    } else if (res.data.code == 10041) {
                        this.$message.error("用户名已存在");
                        this.loginData = {};
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                });
            },

            //重置表单
            resetForm() {
                this.registerData = {};
            }

        }
    })
</script>
</body>
</html>